<template>
    <div class="out_box">
        <headers />

        <div class="type_box">
            <img class="img" src="@assets/imgs/main/currency_11.png" />
            <p class="name">Haha Token / 哈哈金币</p>
            <p class="desc">{{ $t('coin_haha.title_sub') }}</p>
        </div>
        <div class="content_box">
            <div class="price_box mt_40">
                <div class="list">
                    <p class="title">{{ $t('coin_haha.menu[0]') }}</p>
                    <div class="price_num bold mt_10">
                        <p class="price">{{ '$' + (dataList.prices || 0) }}</p>
                        <p class="price_your">{{ '≈ ￥' + $convertRMB(dataList.prices) }}</p>
                    </div>
                </div>
                <div class="list">
                    <p class="title">{{ $t('coin_haha.menu[1]') }}</p>
                    <div class="price_num bold mt_10 borders">
                        <p class="price">
                            {{ $numberAddComma(dataList.totalQuota || 0) }}<span class="company">Haha</span>
                        </p>
                    </div>
                </div>
                <div class="list">
                    <p class="title">{{ $t('coin_haha.menu[2]') }}</p>
                    <div class="price_num bold mt_10">
                        <p class="price">
                            {{ $numberAddComma(dataList.remainQuota || 0) }}<span class="company">Haha</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="phase_box mt_40">
                <div :class="['list', item.status ? 'not_start' : '']" v-for="(item, key) of dataList.list" :key="item.id">
                    <div class="title cl">
                        <i class="iconfont">&#xe637;</i>
                        {{ language === 'zh_CN' ? $t('coin_haha.list.title[0]') + $numstoChinese(key + 1) + $t('coin_haha.list.title[1]') : $t('coin_haha.list.title[0]') + (key + 1) }}
                        <span class="start_date f_r mt_10" v-if="item.createDate">
                            <span class="date">{{ item.createDate }}</span> {{ $t('coin_haha.list.start_date') }}
                        </span>
                        <span class="start_date f_r mt_10" v-else>{{ $t('coin_haha.list.not_start_date') }}</span>
                    </div>
                    <div class="content">
                        <p class="text">
                            <span class="title">{{ $t('coin_haha.list.label[0]') }}：</span>
                            <span class="number">{{ $numberAddComma(item.remainQuota || 0) }} </span>Haha
                        </p>
                        <p class="text">
                            <span class="title">{{ $t('coin_haha.list.label[1]') }}：</span>
                            <span>{{ '120 USDT ≈ 1000 Haha' }}</span>
                        </p>
                        <p class="text">
                            <span class="title">{{ $t('coin_haha.list.label[2]') }}：</span>
                            <span class="date">
                                {{ item.countDate ? item.countDate[0] + ' : ' + item.countDate[1] + ' : ' + item.countDate[2] : 0 }}
                            </span>
                        </p>
                    </div>
                    <div class="text_c">
                        <v-button class="btn" type="primary" size="large" @click="jumpExchange(item)">{{ $t('coin_haha.list.btn') }}</v-button>
                    </div>
                </div>
                <!-- <div class="list not_start">
                    <div class="title cl">
                        <i class="iconfont">&#xe637;</i>第二期
                        <span class="start_date f_r mt_10">
                            时间待定
                        </span>
                    </div>
                    <div class="content">
                        <p class="text">
                            <span class="title">剩余额度：</span>
                            <span class="number">2,000,000 </span>Haha
                        </p>
                        <p class="text">
                            <span class="title">兑换比率：</span>
                            <span>120 USDT ≈ 1000 Haha</span>
                        </p>
                        <p class="text">
                            <span class="title">距离开抢：</span>
                            <span class="date">72:00:00</span>
                        </p>
                    </div>
                    <div class="text_c">
                        <v-button class="btn" type="primary" size="large">马上兑换</v-button>
                    </div>
                </div> -->
            </div>
            <div class="card_box mt_40">
                <v-tabs active-tab-key="1" type="card" @tab-click="tabClick">
                    <v-tab-pane tab-key="1" tab="简单介绍">
                        <div class="box">
                            <h4 class="title bold"># 什么是哈哈金币（Haha）</h4>
                            <section class="text">
                                哈哈金币是GRINOK笑脸矿业算力挖矿平台唯一的价值通证积分，英文简写为Haha。是基于以太坊 ERC20 技术发行的数字通证，具有VIP身份象征、销毁赎回、可兑换矿机算力挖矿产品、缴纳电费、维修费等功能。
                            </section>
                            <section class="text">
                                哈哈金币总量恒定为3600万枚，其中500万兑换额度，100万空投、剩余3000万社区挖矿。另外还具有持币可享受矿池提币费率减免或全返优惠、持币派息理财等权益，哈哈金币可在GRINOK笑脸矿业全场景使用。
                            </section>
                        </div>
                    </v-tab-pane>
                    <v-tab-pane tab-key="2" tab="应用价值">
                        <div class="box">
                            <h4 class="title bold"># 哈哈金币的应用价值  Haha</h4>
                            <section class="text">
                                GRINOK笑脸矿业平台将算力挖矿的矿池提币手续费率回馈哈哈金币的持有者。真正做到矿工社区自治，透过哈哈金币Haha，链接生态应用，实现挖矿矿池费率全返，Haha保值增值，当前矿池费率为3.5%。
                            </section>
                            <section class="text">
                                GRINOK笑脸矿业致力于主流创新矿币的技术研究和提早布局，平台对包括哈哈金币在内的任何币种不承诺、不预判其流通价格以及其涨跌趋势。
                            </section>
                        </div>
                    </v-tab-pane>
                    <v-tab-pane tab-key="3" tab="亮点呈现">
                        <div class="box">
                            <div class="content">
                                <div class="list">
                                    <img class="img" src="@assets/imgs/coin/strong_point1.png" />
                                    <p class="text bold">纯粹社区主义</p>
                                </div>
                                <div class="list">
                                    <img class="img" src="@assets/imgs/coin/strong_point2.png" />
                                    <p class="text bold">无预挖超公平</p>
                                </div>
                                <div class="list">
                                    <img class="img" src="@assets/imgs/coin/strong_point3.png" />
                                    <p class="text bold">依托全产业链</p>
                                </div>
                                <div class="list">
                                    <img class="img" src="@assets/imgs/coin/strong_point4.png" />
                                    <p class="text bold">总量价值稀缺</p>
                                </div>
                                <div class="list">
                                    <img class="img" src="@assets/imgs/coin/strong_point5.png" />
                                    <p class="text bold">技术优势明显</p>
                                </div>
                            </div>
                        </div>
                    </v-tab-pane>
                    <v-tab-pane tab-key="4" tab="交易平台">
                        <div class="card_4">
                            <v-data-table :data='tabList4' :columns='columns' stripe :emptyText="not_data">
                                <template slot="th" slot-scope="props">
                                    <div class="text_l pl_40" v-if="props.column.field === 'name'">
                                        <span>{{ props.title }}</span>
                                    </div>
                                    <span v-else>{{ props.title }}</span>
                                </template>
                                <template slot="td" slot-scope="props">
                                    <div class="text_l pl_40" v-if="props.column.field === 'name'">
                                        <img class="img mr_10" :src="props.item.img" />
                                        <span class="">{{ props.item.name }}</span>
                                    </div>
                                    <span v-else>{{ props.content }}</span>
                                </template>
                            </v-data-table>
                            <!-- <div class="table_more_btn text_c">
                                <span>查看更多<i class="iconfont ml_10">&#xe61f;</i></span>
                            </div> -->
                            <p class="tips_box text_c">以上第三方交易平台已支持 Haha/USDT 自由交易，请您根据实际情况选择</p>
                        </div>
                    </v-tab-pane>
                    <v-tab-pane tab-key="5" tab="挖矿说明">
                        <div class="box">
                            <h4 class="title bold">算力分布图</h4>
                        </div>
                        <div id="echarts" style="width: 100%;height:220px;"></div>
                    </v-tab-pane>
                    <v-tab-pane tab-key="6" tab="相关资讯">
                        <div class="card_6">
                            <!-- <div class="list cl mb_20" v-for="item of tabList6" :key="item">
                                <img class="img f_l" src="@assets/imgs/test/coin1.jpg" />
                                <div class="content f_l">
                                    <p class="title">金色观察丨新的比特币巨鲸：他们来自哪里？</p>
                                    <p class="desc mt_14">在经历了近十年的下跌之后，比特币巨鲸的市场统治地位出现了2011年以来的最大增长。比特币巨鲸数量正在增加，其持有的BTC总余额自2016年以来首次出现增长。不过其持有BTC的美元总价值仍未超过2017年的历史峰值。 虽然新诞生的比特币巨鲸数量在增多，但平均财富却有所降低，原因到底是什么呢？</p>
                                </div>
                            </div>
                            <div class="table_more_btn text_c">
                                <span>
                                    查看更多<i class="iconfont ml_10">&#xe61f;</i>
                                </span>
                            </div> -->
                            <div class="text_c mt_20">{{ not_data }}</div>
                        </div>
                    </v-tab-pane>
                </v-tabs>
            </div>
            <div class="card_content mt_40 pb_40">
                <v-form direction="horizontal" v-show="tabKey === '1'">
                    <v-form-item class="border" label="上线日期" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold">{{ dataList.createTime ? $getFormatMD(dataList.createTime) : '待定' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="历史最高价" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold">{{ '$' + Number(dataList.highestPrice).toFixed(2) + ' / 2020.06.25' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="历史最低价" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold">{{ '$' + Number(dataList.minimumPrice).toFixed(2) + ' / 2020.06.25' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="恒定总量" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold">{{ $numberAddComma(dataList.sumConstant || 0) + ' HAHA' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="流通率" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold">{{ dataList.circulaRate || 0 }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="核心算法" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold">{{ dataList.coreAlgorithm }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="共识机制" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold">{{ dataList.conMechanism }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="已上架平台" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold primary">{{ (dataList.grounding || 0) + '家' }}</span>
                    </v-form-item>
                </v-form>
                <div class="card_2" v-show="tabKey === '2'">
                    <h4 class="mb_20">更新时间：<span class="primary">2020/06/20 20:10:30</span></h4>
                    <div class="content">
                        <div class="list">
                            <img class="img" src="@assets/imgs/main/currency_11.png" />
                            <p class="title">当前市场流通量</p>
                            <p class="bold">≈ 1,000,000 Haha</p>
                            <p class="bold">$ 120000</p>
                            <div class="text_r primary"><span>查看详情 >></span></div>
                        </div>
                        <div class="list">
                            <img class="img" src="@assets/imgs/main/currency_10.png" />
                            <p class="title">平台提币矿池费率汇总</p>
                            <p class="bold">≈ 1,000,000 USDT</p>
                            <div class="text_r primary"><span>查看详情 >></span></div>
                        </div>
                    </div>
                </div>
                <div class="card_3" v-show="tabKey === '3'">
                    <div class="img_box">
                        <img class="img" src="@assets/imgs/main/currency_11.png" />
                        <p class="bold mt_20 text_c">哈哈金币</p>
                    </div>
                    <div class="text_box">
                        <p v-for="(item, key) of tabList3" :key="key">
                            <span class="number text_c">{{ key + 1 }}</span>
                            <span class="title bold">{{ item.title }}</span>
                            <span class="desc">{{ item.desc }}</span>
                        </p>
                    </div>
                </div>
                <div class="card_5" v-show="tabKey === '5'">
                    <v-form direction="horizontal">
                        <v-form-item class="border" label="全网矿池总算力" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text bold">86400 M</span>
                        </v-form-item>
                        <v-form-item class="border" label="全网日产币量（恒定）" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text bold">8640 Haha</span>
                        </v-form-item>
                        <v-form-item class="border" label="日理论收益" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <v-input class="input" placeholder="" v-model="tabList5.password"></v-input>
                            <span class="ant-form-text bold">m/s   ≈ 0.1000 Haha</span>
                        </v-form-item>
                        <v-form-item class="border" label="当前挖矿难度" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text bold">84.375 T</span>
                        </v-form-item>
                    </v-form>
                    <div class="title cl bold">
                        <h4 class="f_l">我的挖矿日产币量（Haha）</h4>
                        <span class="f_r primary pointer" @click="jumpDetails">挖矿明细 >></span>
                    </div>
                    <div class="formula_box">
                        <img class="img" src="@assets/imgs/coin/coin_formula.svg" />
                    </div>
                    <div class="title cl bold">
                        <h4 class="f_l">我的算力（Haha）</h4>
                        <span class="f_r primary pointer" @click="jumpDetails">算力明细 >></span>
                    </div>
                    <div class="hash_your">
                        <div class="list">
                            <img class="img" src="@assets/imgs/coin/hash_rate1.png" />
                            <p class="value">2000 M</p>
                            <p class="name">算力</p>
                        </div>
                        <div class="list">
                            <img class="img" src="@assets/imgs/coin/hash_rate2.png" />
                            <p class="value">2000 M</p>
                            <p class="name">故障</p>
                        </div>
                        <div class="list">
                            <img class="img" src="@assets/imgs/coin/hash_rate3.png" />
                            <p class="value">2000 M</p>
                            <p class="name">累计</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rule_box" v-show="tabKey === '5'">
            <h2>挖矿说明</h2>
            <h4 class="title"># 我的哈哈金币算力</h4>
            <p class="text">
                新用户注册个人初始算力值为：0M；<br />
                每邀请一人注册，个人算力增加 100 M；<br />
                平台每新增一笔订单，新增 900 M 算力；<br />
                配如下：用户本人300M、一级分销300M、二级分销150M。
            </p>
            <h4 class="title"># 初始算力</h4>
            <p class="text">全网设定哈哈金币矿池挖矿初始算力为 86400 M，即在没有任何算力增加或减少的情况下，全网每日产币量 8640 Haha，将由这 86400 M产出。哈哈金币每 1分钟产生一个块，一个块6枚币，每天即为6*60*24 = 8640 枚。初始日理论挖矿产币量为 10 M ≈ 1 haha；</p>
            <h4 class="title"># 全网有效算力</h4>
            <p class="text">全网有效算力 = 初始算力 + 全网新增算力 - 全网减少算力；市场推广越早，挖矿日产币量就越高，未来升值的空间就越大，哈哈金币越稀缺则价值越高。</p>
            <h4 class="title"># 新增算力</h4>
            <p class="text">
                1、注册：GRINOK平台每新增1位注册用户，则全网算力增加 100 M，这100 M 归邀请人的个人算力中心，有效挖矿期100天。<br />
                2、购买：GRINOK平台每新增1笔有效挖矿订单，则全网算力增加 900 M；<br />
                3、分配：新增的 900 M 算力分配如下，，购买者本人300M、一级分销300M、二级分销150M、运营节点150M；<br />
                4、哈哈金币挖矿算力与用户购买的算力订单生效日期同步。
            </p>
            <h4 class="title"># 减少算力</h4>
            <p class="text">GRINOK不对以下不可控风险所造成的损失负责：不能预见、不能避免或不能克服的客观事件，包括自然灾害如洪水、火山爆发、地震、山崩、火灾、被当地政府部门评定为百年不遇级别以上的风暴和恶劣气候等，政府行为或指令，城市级别的电网供电事故，以及社会异常事件如战争、罢工、动乱、疫情等。</p>
        </div>
        
        <footers />
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';
    import echarts from '@common/charts/echarts.min.js';
    import { getCoinList } from '@doapis/orders/coin_haha.js';

    export default {
        name: "CoinHaha",
        components: {
            Headers,
            Footers
        },
        data: function() {
            return {
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                },
                dataList: [],
                tabKey: '1',
                tabList3: [
                    { title: '纯粹社区主义：', desc: '哈哈金币采用社区自治的运营模式，去中心化、数据公开透明。' },
                    { title: '无预挖超公平：', desc: '3000万哈哈金币的子币均是透过社区挖矿产生，全网算力，人人平等。' },
                    { title: '依托全产业链：', desc: '哈哈金币将挖矿生态上下游，例如矿池、矿场、矿机、交易平台有效融合。' },
                    { title: '总量价值稀缺：', desc: '哈哈金币供应总量为3600万枚，分10年产出，平均每年供应量约为300万枚。' },
                    { title: '技术优势明显：', desc: '哈哈金币借鉴以太坊技术以及其他区块链技术，在行业内处于先进水平。' },
                ],
                tabList6: [1,2,3],
                columns:[
                    { title:"排序", field:'id', width: '20%' },
                    { title:"交易平台", field:'name', width: '30%' },
                    { title:"24 H成交额", field:'price', width: '25%' },
                    { title:"占比", field:'percent', width: '25%' },
                ],
                tabList5: {
                    password: '1'
                },
                language: $.cookie('multilingual') || 'zh_CN'
            }
        },
        computed: {
        },
        methods: {
            // 点击切换标签页显示的内容
            tabClick: function(key) {
                this.tabKey = key;
            },
            jumpExchange: function(params) {
                if (!params.status) {
                    this.$router.push({ path: '/coin_haha/exchange', query: {
                        id: params.id,
                        proportion: params.subscriptionRatio
                    }});
                }
            },
            jumpDetails: function() {
                this.$router.push({ path: '/coin_haha/mining_details', query: {}});
            },
            getData: function() {
                const that = this;
                getCoinList().then(function(res) {
                    res.data.list.forEach(function(item) {
                        let countDate = $.$getCountDown(new Date(item.createTime) - new Date());
                        item.createDate = item.createTime ? $.$getFormatMD(item.createTime, true) : 0;
                        item.countDate = item.createTime ? countDate : 0;
                    });
                    that.dataList = res.data;
                    that.loadCharts();
                });
            },
            $getFormatMD: $.$getFormatMD,
            $numstoChinese: $.$numstoChinese,
            $convertRMB: $.$convertRMB,
            // 加载图表
            loadCharts: function() {
                let charts = echarts.init($('#echarts')[0]);
                let chartsOpt = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['07/01', '07/02', '07/03', '07/04', '07/05', '07/06', '07/07']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    itemStyle: {
                        color: '#1aa1dd'
                    },
                    grid: {  
                        left: '0',
                        right: '40px',
                        top: '40px',
                        bottom: '0',
                        containLabel: true
                    },  
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#7bc9fd'
                            }, {
                                offset: 1,
                                color: '#fff'
                            }])
                        }
                    }],
                    animation: false
                };
                charts.setOption(chartsOpt);
            },
            tabList4: function() {
                return new Promise(function(resolve) {
                    resolve({
                        "result":[
                            // {
                            //     "id": "1",
                            //     "img": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1296777716,126834046&fm=26&gp=0.jpg",
                            //     "name": "火币全球站",
                            //     "price": "$ 12345.67",
                            //     "percent": "25%",
                            // },{
                            //     "id": "2",
                            //     "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=218213232,4127664507&fm=26&gp=0.jpg",
                            //     "name": "币安网",
                            //     "price": "$ 12345.67",
                            //     "percent": "25%",
                            // },{
                            //     "id": "3",
                            //     "img": "https://s2.bqiapp.com/logo/2/coinbasepro.png",
                            //     "name": "Coinbase Pro",
                            //     "price": "$ 12345.67",
                            //     "percent": "25%",
                            // },{
                            //     "id": "4",
                            //     "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3940041249,1468301688&fm=26&gp=0.jpg",
                            //     "name": "OKEX",
                            //     "price": "$ 12345.67",
                            //     "percent": "25%",
                            // },{
                            //     "id": "5",
                            //     "img": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3679088863,1242465331&fm=15&gp=0.jpg",
                            //     "name": "BitMEX",
                            //     "price": "$ 12345.67",
                            //     "percent": "25%",
                            // }
                        ],
                    });
                });
            },
            $numberAddComma: $.$numberAddComma
        },
        created: function() {
            this.getData();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .type_box{
        padding: 50px 0;
        text-align: center;
        background: black url('~@assets/imgs/common/currency_title_bg.jpg') no-repeat left bottom / 100% auto;
        .img{
            width: 60px;
        }
        .name{
            margin: 5px 0;
            font-size: 20px;
            color: white;
        }
        .desc{
            font-size: 10px;
            line-height: 10px;
            color: white;
            opacity: 0.4;
        }
    }
    .content_box{
        .content_spacing;
        padding-top: 2px;
        background-color: white;
        /deep/ label{
            font-size: 14px;
            color: #999;
            vertical-align: text-bottom;
        }
        /deep/ .ant-form-item{
            padding: 20px 0;
            margin-bottom: 0;
            font-size: 13px;
            color: #333;
            &.border{
                border-bottom: 1px solid #efeff4;
            }
        }
        /deep/ .ant-form-item-label{
            width: 22%;
            padding-right: 50px;
            text-align: left;
        }
        .primary{
            color: @theme_color;
        }
        .price_box{
            .flex_row_wrap;
            padding: 30px 0;
            .box_shadow_radius;
            .list{
                flex: 4;
                text-align: center;
                .title{
                    font-size: 10px;
                    line-height: 14px;
                    color: #999;
                }
                .borders{
                    border-left: 1px solid #EDEDED;
                    border-right: 1px solid #EDEDED;
                }
                .price_num{
                    padding: 10px 0;
                    .price{
                        font-size: 20px;
                        line-height: 28px;
                        color: @theme_color;
                    }
                    .price_your{
                        font-size: 16px;
                        color: @color_black;
                    }
                    .company{
                        margin-left: 10px;
                        font-size: 10px;
                    }
                }
            }
        }
        .phase_box{
            .flex_row_wrap;
            .list{
                flex: 4;
                padding: 20px;
                .box_shadow_radius;
                &:last-child{
                    margin-left: 20px;
                }
                >.title{
                    font-size: 20px;
                    .font_black;
                    .iconfont{
                        margin-right: 10px;
                        font-size: 22px;
                        color: #ff5f00;
                    }
                    .start_date{
                        font-size: 10px;
                        .date{
                            color: @theme_color;
                        }
                    }
                }
                .content{
                    margin-top: 30px;
                    font-size: 10px;
                    .text{
                        line-height: 34px;
                    }
                    .title{
                        .font_gray;
                    }
                    .date{
                        color: @color_orange;
                    }
                    .number{
                        font-size: 20px;
                        color: @color_orange;
                    }
                }
                .btn{
                    width: 180px;
                    height: 36px;
                    margin-top: 30px;
                    .orange_linear_ellipsis_btn;
                }
            }
            .not_start{
                >.title .iconfont, .date{
                    opacity: 0.4;
                }
                .start_date{
                    .font_gray;
                }
                .btn{
                    .gray_bg_ellipsis_btn;
                }
                .number{
                    .font_black;
                }
            }
        }
        .card_box{
            /deep/ .ant-tabs-tab, /deep/ .ant-tabs-bar{
                margin-bottom: 0;
                border: none;
                background-color: white;
            }
            /deep/ .ant-tabs-tab{
                padding: 16px;
            }
            /deep/ .ant-tabs-tab-active{
                .font_black;
                background: #f9f9f9;
            }
            .box{
                padding: 30px;
                background: #f9f9f9;
                .text{
                    font-size: 10px;
                    margin-top: 20px;
                }
                .content{
                    .flex_row_wrap;
                    .list{
                        flex: 4;
                        margin: 0 25px;
                        padding: 10px 0;
                        .img{
                            width: 80px;
                        }
                        .text{
                            font-size: 13px;
                            text-align: center;
                        }
                    }
                }
            }
        }
        .card_content{
            .input{
                width: 100px;
                height: 16px;
                box-sizing: content-box;
            }
            .card_2{
                .content{
                    .flex_row_wrap;
                    .list{
                        .box_shadow_radius;
                        flex: 4;
                        padding: 25px 20px;
                        font-size: 10px;
                        line-height: 30px;
                        &:last-child{
                            margin-left: 20px;
                        }
                        .img{
                            width: 70px;
                            padding: 10px 0 40px 0;
                        }
                        .title{
                            .font_gray;
                        }
                    }
                }
            }
            .card_3{
                .flex_row_wrap;
                padding: 30px 50px;
                .box_shadow_radius;
                >.img_box{
                    width: 90px;
                    margin-right: 74px;
                    align-self: center;
                }
                >.text_box{
                    flex: 4;
                    font-size: 13px;
                    line-height: 40px;
                    .number{
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        display: inline-block;
                        font-size: 10px;
                        border-radius: 50%;
                        color: @theme_color;
                        background-color: #F7F7F7;
                    }
                    .desc{
                        font-size: 10px;
                        .font_gray;
                    }
                }
            }
        }
        .card_4{
            /deep/ .ant-table-tbody>tr>td, /deep/ .ant-table-thead>tr>th{
                text-align: center;
            }
            /deep/ .ant-table.ant-table-stripe table tr:nth-child(2n){
                background-color: #F5F6FF;
            }
            .img{
                display: inline-block;
                width: 34px;
            }
            .tips_box{
                font-size: 10px;
                color: #CCC;
            }
        }
        .card_5{
            .title{
                padding: 22px 0;
                font-size: 10px;
                .f_l, .f_r{
                    font-weight: 700;
                }
            }
            .formula_box{
                margin: 30px 0;
                padding: 30px 0;
                .box_shadow_radius;
                .img{
                    width: 88%;
                    min-width: 700px;
                    max-width: 880px;
                }
            }
            .hash_your{
                .flex_row_wrap;
                justify-content: center;
                padding: 50px 0;
                text-align: center;
                .list{
                    margin: 0 9%;
                    .img{
                        width: 80px;
                    }
                    .value{
                        margin: 4px 0;
                        font-size: 16px;
                    }
                    .name{
                        font-size: 10px;
                        color: #999;
                    }
                }
            }
        }
        .card_6{
            .list{
                border-radius: 8px;
                border: 1px solid #DDD;
                background-color: #fdfdfd;
                .img{
                    width: 130px;
                    height: 130px;
                    border-radius: 8px;
                }
                .content{
                    width: calc(100% - 130px);
                    padding: 20px 3%;
                    box-sizing: border-box;
                    .title{
                        font-size: 13px;
                        font-weight: 700;
                    }
                    .desc{
                        font-size: 10px;
                        line-height: 18px;
                        color: #666;
                    }
                }
            }
        }
        .table_more_btn{
            margin: 20px 0;
            font-size: 10px;
            text-align: center;
            color: @theme_color;
            .iconfont{
                display: inline-block;
                font-size: 13px;
                transform: rotate(90deg);
                vertical-align: middle;
            }
        }
    }
    .rule_box{
        width: 80%;
        min-width: 800px;
        margin: 30px auto;
        font-weight: 700;
        >h2{
            font-weight: 700;
            .img{
                margin-left: -34px;
                display: inline-block;
                width: 28px;
                vertical-align: text-top;
            }
        }
        .title{
            margin: 20px 0 10px 0;
            color: #666;
        }
        .text{
            line-height: 16px;
            font-size: 10px;
            font-weight: normal;
            color: #999;
        }
    }
</style>
